<template>
    <div class="list" >
       <div class="item" v-for="item in letters"
            :key="item"
            @touchstart="handleTouchStart"
            @touchmove="handleTouchMove"
            @touchStart="handleTouchEnd"
            @click="handleLetterClick"
            :ref="item"

       >
         {{item}}
       </div>

    </div>
</template>

<script>
    export default {
        name: "Alphabet",
      data(){
          return {
               touchStatus:false,
               startY:0,
               timer:null
          }
      },
      props:{
          cities:Object
      },
      updated(){
          this.startY=this.$refs['A'][0].offsetTop//避免多次计算，优化性能
      },
      mounted(){

      },
      methods:{
          handleLetterClick (e){
           this.$emit('lettChange',e.target.innerText)
          },
          handleTouchStart(){
             this.touchStatus=true
          },
          handleTouchMove(e){
            if(this.touchStatus){
              //const startY=this.$refs.A[0].offsetTop;//this.$refs['A'][0]也可以
              if(this.timer){
                clearTimeout(this.timer);
              }
                this.timer=setTimeout(()=>{//做性能优化
                  const endY=e.touches[0].clientY-78;
                  const index=Math.floor((endY-this.startY)/20);
                  this.$emit("lettChange",this.letters[index]);
                },16)
            }
            //this.$emit("lettChange",e.currentTarget.innerText)这样写不行
          },
          handleTouchEnd(){
            this.touchStatus=false
          }


      },
      computed:{
        letters () {
          const letters = []
          for (let key in this.cities) {
            letters.push(key)
          }
          return letters
        }
      }
    }
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
 .list
    position:absolute
    display:flex
    flex-direction:column
    justify-content:center
    width:.5rem
    right:0
    bottom:0
    top:1.5rem
   // background-color:#ff0000
    .item
      line-height:0.4rem
      //background-color:yellow
      text-align:center
      color:$bgColor
</style>
